<template>
    <div>
        <div class="shaixuan">
            <div class="shaiheader">筛选条件</div>
            <i></i>
            <i></i>
            <Row>
                <Col span="12">
                    <Row>
                        <Col span="6" class="titlename">测评名称:</Col>
                        <Col span="14">
                            <Input
                                size="small"
                                class="samllinput"
                                v-model="evaluationName"
                                placeholder="请输入企业名称"
                                type="text"
                            />
                        </Col>
                    </Row>
                </Col>
            </Row>

            <i></i>
            <i></i>
            <i></i>
            <Row>
                <Col span="8">
                    <span style="padding-left:20px">时间限制 ：</span>
                    <Select v-model="timeLimit" size="small" style="width:100px">
                        <Option value="10">10分钟</Option>
                        <Option value="15">15分钟</Option>
                        <Option value="20">20分钟</Option>
                        <Option value="30">30分钟</Option>
                        <Option value="40">40分钟</Option>
                    </Select>
                </Col>
                <!-- <Col span="6">
                    消耗点数：
                    <Select v-model="points" size="small" style="width:100px">
                        <Option v-model="i in pointsList" :value="i" :key="i">{{i}}点</Option>
                    </Select>
                </Col>-->
                <Col span="6">
                    服务状态：
                    <Select v-model="shenghe" size="small" style="width:100px">
                        <Option value="0">开通</Option>
                        <Option value="1">未开通</Option>
                    </Select>
                </Col>
                <Col span="3">
                    <Button style="transform:translate(0,-10%)" type="primary" @click="loadData">搜索</Button>
                </Col>
            </Row>
                <i></i>
        </div>
        <span class="titlename">显示列数：</span>
        <Select v-model="pageSize" size="small" class="titlename" style="width:100px">
            <Option v-for="item in pagelist" :value="item" :key="item">{{item}}</Option>
        </Select>
            <Button @click="addItem">新增</Button>
        <i></i>
        <Table border :columns="columns" :data="data"></Table>
        <Modal v-model="bianjiModel" @on-ok="setItem" title="测评简介编辑" width="360">
            <div style="text-align:center">
                <Input
                    v-model="synopsis"
                    maxlength="100"
                    show-word-limit
                    type="textarea"
                    placeholder="请在此输入内容"
                    style="width: 278px"
                />
            </div>
        </Modal>
        <input hidden="" ref="kuang" type="file" @change="fileChangeHan" />
    </div>
</template>

<script>
import { post } from "../../http/http";
import { coral } from "color-name";
export default {
    data() {
        return {
            data: [],
            //编辑简介
            bianjiModel: false,
            row: 0,
            synopsis:'',

            //进度条
            complete: 0,

            pageSize: 10,
            shenghe: "",
            evaluationName: "",
            timeLimit: "",
            points: "",
            
            // 枚举项
            pointsList: [10, 15, 20, 30, 40, 50],
            pagelist: [10, 20, 30, 40, 50],
            timeLimits:[10,15,20,30,40],
            columns: [
                {
                    title: "测评名称",
                    key: "evaluationName",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h("Input", {
                                props: {
                                    value: params.row.evaluationName
                                },
                                on: {
                                    'on-change': function(event) {
                                        console.log(event)  
                                        params.row.evaluationName = event.target.value
                                        console.log(params.row.evaluationName)
                                    }
                                }
                            });
                        } else {
                            return h("div", params.row.evaluationName);
                        }
                    }
                },
                {
                    title: "测评简介",
                    key: "synopsis",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h(
                                "a",
                                {
                                    style:{
                                        'text-align':'center'
                                    },
                                    on: {
                                        click: event => {
                                            console.log(params);
                                            this.bianjiModel = true;

                                            this.row = params.row;
                                        }
                                    }
                                },
                                "编辑"
                            );
                        } else {
                            return h("div", params.row.synopsis);
                        }
                    }
                },
                
                {
                    title: "封面图片",
                    key: "coverImage",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h(
                                "Upload",
                                {
                                    props:{
                                        action:this.$store.state.baseUrl+"/upload",
                                        'show-upload-list':false,
                                        'on-success':(response)=>{
                                            params.row.coverImage=response.data
                                        }
                                        
                                    },
                                    style:{
                                        color:'#2d8cf0',
                                        'text-align':'center',
                                        "cursor":'pointer'
                                    },
                                },
                                "上传图片"
                            );
                        } else {
                            return h(
                                "a",
                                {
                                    domProps: {
                                        href: this.$store.state.baseUrl+params.row.coverImage
                                    }
                                },
                                "图片链接"
                            );
                        }
                    }
                },
                {
                    title: "题库模板",
                    key: "questionBankName",
                    render: (h, params) => {
                            return [h(
                                "Upload",
                                {
                                    props:{
                                        action: this.$store.state.baseUrl+"/upload/questionbank",
                                        'show-upload-list':false,
                                        'on-success':(response)=>{
                                            if(response.code==-100){
                                                this.$Message.error(response.msg)
                                            }else{
                                                params.row.importExcel=response.data.excelId
                                                this.handleSave(params.row);
                                            }
                                        }
                                    },
                                    style:{
                                        color:'#2d8cf0',
                                        'text-align':'center',
                                        "cursor":'pointer'
                                    },
                                },
                                "导入题库"
                            ),
                            h("a",{ 
                                domProps: {
                                    href:  this.$store.state.baseUrl+"/down/candidate"
                                }
                            },
                            "下载模板")];
                    }
                },
                {
                    title: "时间限制",
                    key: "timeLimit",
                    render: (h, params) => {
                        if (params.row.$isEdit) {

                            let arr = [];
                            for (let i = 0; i < this.timeLimits.length; i++) {
                                arr.push(
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: this.timeLimits[i],
                                                label:this.timeLimits[i]
                                            }
                                        },
                                        this.timeLimits[i]
                                    )
                                );
                            }
                            return h(
                                "Select",
                                {
                                    props: {
                                        value: params.row.timeLimit,
                                        label:params.row.timeLimit
                                    },
                                    on: {
                                        "on-change": function(event) {
                                            params.row.timeLimit = event;

                                        }
                                    }
                                },
                                arr
                            );
                        } else {
                            return h("div", params.row.points);
                        }
                    }
                },
                {
                    title: "消耗点数",
                    key: "points",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            let arr = [];
                            for (let i = 0; i < this.pointsList.length; i++) {
                                arr.push(
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: this.pointsList[i],
        
                                            }
                                        },
                                        this.pointsList[i]
                                    )
                                );
                            }
                            return h(
                                "Select",
                                {
                                    props: {
                                        value: params.row.points,

                                        label:params.row.points
                                    },
                                    on: {
                                        "on-change": function(event) {
                                            params.row.points = event;
                                            console.log(params);
                                        }
                                    }
                                },
                                arr
                            );
                        } else {
                            return h("div", params.row.points);
                        }
                    }
                },
                {
                    title: "服务状态",
                    key: "isUse",
                    render: (h, params) => {
                        if (params.row.$isEdit) {
                            return h(
                                "Select",
                                {
                                    props: {
                                        value: params.row.isUse,
                                        label:params.row.timeLimit==0?"开通":"未开通"
                                    },
                                    on: {
                                        "on-change": function(event) {
                                            params.row.isUse = event;
                                        }
                                    }
                                },
                                [
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: 0,
                                                label:'开通'
                                            }
                                        },
                                        "开通"
                                    ),
                                    h(
                                        "Option",
                                        {
                                            props: {
                                                value: 1,
                                                label:'未开通'
                                            }
                                        },
                                        "未开通"
                                    )
                                ]
                            );
                        } else {
                            return h(
                                "div",
                                params.row.isUse== 0 ? "开通" : "未开通"
                            );
                        }
                    }
                },
                {
                    title: "操作",
                    width: "180px",
                    render: (h, params) => {
                        return h("div", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            if (params.row.$isEdit) {
                                                this.handleSave(params.row);
                                            } else {
                                                this.handleEdit(params.row);
                                            }
                                        }
                                    }
                                },
                                params.row.$isEdit ? "确定" : "编辑"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: () => {
                                            this.removeQy(params.row.id);
                                        }
                                    }
                                },
                                "移除"
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small"
                                    },
                                    on: {
                                        click: () => {
                                            this.removeQy(params.row.id);
                                        }
                                    }
                                },
                                "预览"
                            )
                        ]);
                    }
                }
            ]
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        setTime(e) {
            this.startTime = e[0];
            this.endTime = e[1];
        },
        setItem(e) {
            this.row.synopsis = this.synopsis;
        },
        addItem(e){
            this.data.unshift({
                "evaluationName": "",
                "synopsis": "",
                "coverImage": "https://www.baidu.com",
                "timeLimit": 10,
                "questionBankName": "null",
                "points": 10,
                "isDel": 0,
                "isUse": 0,
                "$isEdit": true,
            })
        },
        async removeQy(id) {
            const data = await post("evaluation_delete", {
                id
            }).then(data => data);
        },
        handleEdit(row) {
            this.$set(row, "$isEdit", true);
        },
        clickUpBoxHan() {
            // 创建一个事件
            let evt = document.createEvent("MouseEvents");
            // 初始化这个事件
            evt.initMouseEvent("click", false, false);
            // 发送给input框
            this.$refs.kuang.dispatchEvent(evt);
        },
        // 当用户选择了一个图片之后做的事情
        fileChangeHan:()=>{
            // 显示对话框
            this.isShowDialog1 = true;
            this.$Notice.success({
                title: "正在上传图片",
                name: "notice1",
                desc:'上传图片ing',
                render: h => {
                    return h("Progress", {
                        props: {
                            percent: complete
                        }
                    });
                }
            });
            // 创建虚拟表单
            let form = new FormData();
            // 备份
            var self = this;
            // 在虚拟表单中追加图片
            form.append("tupian", this.$refs.file.files[0]);
            // 提交虚拟表单
            post("upload", form, {
                // 头部
                headers: { "Content-Type": "multipart/form-data" },
                // 进度
                onUploadProgress: progressEvent => {
                    let complete =
                        (progressEvent.loaded / progressEvent.total) * 100;
                    self.p1 = complete;
                }
            }).then(data => {
                console.log(data);
                //关闭提示
                self.$Notice.destroy("notice1");
                self.loadData();
            });
        },
        async handleSave(row) {
            console.log(row)
            if (
                row.evaluationName != "" &&
                row.synopsis != "" &&
                row.coverImage != "" &&
                row.timeLimit != "" &&
                row.points != "" &&
                row.questionBankName != "" 
            )
            {
                this.$set(row, "$isEdit", false);
                //TODO:修改接口 直接传 row
                const data = await post("evaluation_update", row).then(data => data);
            } else {
                this.$Message.warning("选项不能为空");
            }
        },
        async loadData() {
            const data = await post("evaluation_queryPage", {
                evaluationName: this.evaluationName,
                isUse: this.shenghe,
                pageNum: 0,
                pageSize: this.pageSize,
                points: this.points,
                timeLimit: this.timeLimit
            }).then(data => data);
            this.data = data.data.list;
        }
    }
};
</script>

<style lang="less" scoped>
i {
    display: block;
    height: 10px;
}
.ivu-table-wrapper.ivu-table-wrapper-with-border {
    overflow: visible;
}
.shaixuan {
    background: #f8f8f9;
    border: 1px solid #dcdee2;
    margin-bottom: 40px;
    .shaiheader {
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        padding-left: 10px;

        border-bottom: 1px solid #dcdee2;
    }
}

.titlename {
    padding-left: 20px;
    padding-right: 10px;
}
</style>